<template>
  <div style="margin-left: 20px;margin-right: 20px;margin-top: 20px">
    <el-card class="box-card" style="margin-bottom: 20px">
      <!--选题信息展示-->
      <el-descriptions title="选题信息" direction="vertical" :column="4" border>
        <el-descriptions-item label="课题名称">
          <template>{{ topicInfo.title ? topicInfo.title : '无数据' }}</template>
        </el-descriptions-item>
        <el-descriptions-item label="指导老师">
          <template>{{ topicInfo.username ? topicInfo.username : '无数据' }}</template>
        </el-descriptions-item>
        <el-descriptions-item label="电子邮箱">
          <template>{{ topicInfo.email ? topicInfo.email : '无数据' }}</template>
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          <template>{{ topicInfo.phone ? topicInfo.phone : '无数据' }}</template>
        </el-descriptions-item>
        <el-descriptions-item label="课题来源">
          <template>{{ topicInfo.source ? topicInfo.source : '无数据' }}</template>
        </el-descriptions-item>
        <el-descriptions-item label="课题类别">
          <template>{{ topicInfo.type ? topicInfo.type : '无数据' }}</template>
        </el-descriptions-item>
        <el-descriptions-item label="课程完成途径">
          <template>{{ topicInfo.approach ? topicInfo.approach : '无数据' }}</template>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display: flex; justify-content: space-between">
        <span>材料上传</span>
        <div>
          <el-button type="primary" size="small" @click="dialogFormVisible = true">上传文件</el-button>
        </div>
      </div>
      <el-table
        :data="ManagerData"
        border
        style="width: 100%">
        <el-table-column
          prop="filename"
          label="文件名称">
        </el-table-column>
        <el-table-column
          prop="type"
          label="文件类型">
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="deleteFile(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="材料提交" :visible.sync="dialogFormVisible">
      <el-form ref="uploadForm" :model="uploadForm" label-width="80px">
        <el-form-item label="文件类型">
          <el-select v-model="uploadForm.fileType" placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选取文件" prop="fileList">
          <el-upload
            class="upload-demo"
            drag
            :headers="headers"
            ref="upload"
            :action="uploadUrl"
            :on-success="handleSuccess"
            show-file-list>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="materialSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getThesisInfoApi } from "@/api/ThesisApi";
import { deleteMaterialApi, getGuideListApi, materialSubmitApi } from "@/api/GuideApi";

export default {
  name: "Manager",
  data() {
    return {
      dialogFormVisible: false,
      ManagerData: [],
      headers: {
        token: localStorage.getItem("token")
      },
      fileList: [],
      topicInfo: {},
      uploadForm: {},
      options: [
        '开题报告',
        '中期检查',
        '论文初稿',
        '论文终稿',
        '论文答辩'
      ],
      uploadUrl: this.$uploadUrl + '/file'
    }
  },
  methods: {
    getData() {
      getGuideListApi().then(res => {
        if (res.code === 200) {
          this.ManagerData = res.data
        }
      })
    },
    getTopicInfo() {
      getThesisInfoApi().then(res => {
        if (res.code === 200) {
          this.topicInfo = res.data
        }
      })
    },
    handleSuccess(res) {
      if (res.code === 200) {
        this.uploadForm.fileId = res.data.id
        this.$message.success("上传成功")
      } else {
        this.$message.error("上传失败")
      }
    },
    materialSubmit() {
      materialSubmitApi(this.uploadForm).then(res => {
        if (res.code === 200) {
          this.$message.success("上传成功")
          this.dialogFormVisible = false
          this.getData()
          this.getTopicInfo()
        }
      })
      this.uploadForm = {}
    },
    deleteFile(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id
        }
        deleteMaterialApi(params).then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功")
            this.getData()
            this.getTopicInfo()
          } else {
            this.$message.error("删除失败")
          }
        })
      })
    }
  },
  created() {
    this.getData()
    this.getTopicInfo()
  }
}
</script>

<style scoped>

</style>
